@import "@@/styles/variables.scss";

// 重写 app-container 样式以使用 flex 布局
.app-container {
  height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  margin: 20px;
  padding: 20px;
  background-color: var(--el-bg-color);
  border-radius: 8px;
  overflow: hidden;
}

.page-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;

  // 确保头部组件不被压缩
  :deep(.page-header) {
    flex-shrink: 0;
  }

  :deep(.stats-cards) {
    flex-shrink: 0;
  }
}

.filter-section {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 20px;
  padding: 16px;
  background: var(--el-bg-color);
  border-radius: 8px;
  border: 1px solid var(--el-border-color-lighter);
  flex-shrink: 0;

  .search-box {
    flex: 1 1 auto;
    min-width: 0;

    :deep(.el-input) {
      width: 100%;
      height: 36px;

      .el-input__wrapper {
        border-radius: 6px;
        border: 0.5px solid var(--el-border-color-lighter);
        height: 36px;
        padding: 0 12px;

        &:hover {
          border-color: var(--el-border-color);
        }

        &.is-focus {
          border-color: var(--el-color-primary);
          box-shadow: 0 0 0 2px var(--el-color-primary-light-9);
        }
      }

      .el-input__inner {
        font-size: 14px;
        height: 34px;
        line-height: 34px;
      }

      .el-input__prefix {
        color: var(--el-text-color-placeholder);
      }
    }
  }

  .filter-controls {
    display: flex;
    gap: 8px;

    :deep(.el-select) {
      .el-select__wrapper {
        border-radius: 6px;
        border: 0.5px solid var(--el-border-color-lighter);
        height: 36px;

        &:hover {
          border-color: var(--el-border-color);
        }

        &.is-focused {
          border-color: var(--el-color-primary);
          box-shadow: 0 0 0 2px var(--el-color-primary-light-9);
        }
      }

      .el-select__placeholder {
        font-size: 14px;
        color: var(--el-text-color-placeholder);
      }

      .el-select__selected-item {
        font-size: 14px;
      }
    }
  }
}

.table-section {
  background: var(--el-bg-color);
  border-radius: 8px;
  border: 1px solid var(--el-border-color-lighter);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1;

  .table-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--el-border-color-extra-light);
    flex-shrink: 0;

    h3 {
      margin: 0;
      font-size: 16px;
      font-weight: 600;
      color: var(--el-text-color-primary);
    }
  }

  .user-tracking-table {
    flex: 1;
    overflow: hidden;

    :deep(.el-table) {
      height: 100%;
      .el-table__header {
        th {
          background-color: var(--el-fill-color-light);
          color: var(--el-text-color-regular);
          font-weight: 600;
          font-size: 14px;
          padding: 16px 12px;
          border-bottom: 1px solid var(--el-border-color-lighter);

          .cell {
            padding: 0;
          }
        }
      }

      .el-table__body {
        tr {
          &:hover {
            background-color: var(--el-fill-color-light);
          }

          td {
            padding: 16px 12px;
            border-bottom: 1px solid var(--el-border-color-extra-light);

            .cell {
              padding: 0;
            }
          }
        }
      }

      .el-table__empty-block {
        padding: 40px 0;
      }
    }

    // 用户信息列样式
    .user-info {
      .nickname {
        font-weight: 600;
        color: var(--el-text-color-primary);
        font-size: 14px;
        margin-bottom: 4px;
      }

      .phone {
        color: var(--el-text-color-secondary);
        font-size: 13px;
        margin-bottom: 2px;
      }

      .register-time,
      .last-active {
        color: var(--el-text-color-placeholder);
        font-size: 12px;
        line-height: 1.3;
      }
    }

    // 用户类型列样式
    .user-type-cell {
      display: flex;
      flex-direction: column;
      gap: 4px;

      .version-badge {
        background: var(--el-color-info);
        color: var(--el-color-white);
        font-size: 10px;
        padding: 2px 6px;
        border-radius: 4px;
        text-align: center;
        font-weight: 600;
      }
    }

    // 用户信息样式
    .user-info {
      .brand-name {
        font-weight: 600;
        color: var(--el-text-color-primary);
        font-size: 14px;
        margin-bottom: 2px;
      }

      .phone-number {
        color: var(--el-text-color-secondary);
        font-size: 12px;
        margin-bottom: 4px;
      }

      .time-info {
        .register-time,
        .redeem-time {
          color: var(--el-text-color-placeholder);
          font-size: 11px;
          line-height: 1.3;
          margin-bottom: 1px;
        }
      }
    }

    // 用户类型样式
    .user-type-cell {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;

      .version-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
      }
    }

    // 邀请信息列样式
    .invitation-info {
      .invitation-code {
        font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
        font-size: 12px;
        color: var(--el-text-color-primary);
        font-weight: 500;
        margin-bottom: 2px;
      }

      .agent-path {
        color: var(--el-text-color-secondary);
        font-size: 12px;
        margin-bottom: 4px;
      }

      .trial-info {
        margin-bottom: 4px;
      }

      .today-publish {
        color: var(--el-text-color-regular);
        font-size: 11px;
        line-height: 1.4;

        .online-tag {
          background: var(--el-color-warning);
          color: var(--el-color-white);
          font-size: 9px;
          padding: 1px 4px;
          border-radius: 2px;
          margin-left: 4px;
        }
      }
    }

    // 绑定信息列样式
    .bind-info {
      display: flex;
      flex-direction: column;
      gap: 6px;

      .account-item {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 4px;
        line-height: 1.4;

        .platform-label {
          font-size: 12px;
          color: var(--el-color-danger); // 红色标签
          font-weight: 500;
          flex-shrink: 0;
        }

        .account-name {
          font-size: 12px;
          color: var(--el-text-color-regular);
          word-break: break-all;
          flex: 1;
          min-width: 0;
        }
      }
    }

    // 账户状态样式
    .account-status {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px;
    }

    // 数据列样式
    .today-data,
    .total-data {
      .data-row {
        color: var(--el-text-color-regular);
        font-size: 13px;
        line-height: 1.4;
        margin-bottom: 2px;

        &:last-child {
          margin-bottom: 0;
        }

        .limit-text {
          color: var(--el-text-color-placeholder); // 灰色显示限制文本
          font-size: 12px;
        }
      }
    }

    // 最后活跃时间样式
    .last-active-time {
      color: var(--el-text-color-secondary);
      font-size: 12px;
    }

    // 操作按钮样式
    .action-buttons {
      display: flex;
      gap: 4px;

      .el-button {
        padding: 4px;
        color: var(--el-text-color-regular);

        &:hover {
          color: var(--el-color-primary);
        }

        .el-icon {
          font-size: 16px;
        }

        &.disable-btn {
          :deep(.disable-icon) {
            width: 20px;
            height: 20px;
            font-size: 20px;
            color: #c33142;
            display: inline-block;
          }
          :deep(.disable-icon svg) {
            width: 20px;
            height: 20px;
          }
        }
      }
    }
  }

  .pagination-section {
    padding: 16px 24px;
    border-top: 1px solid var(--el-border-color-extra-light);
    background-color: var(--el-fill-color);
    flex-shrink: 0;
    display: flex;
    justify-content: center;

    :deep(.el-pagination) {
      .el-pagination__total {
        color: var(--el-text-color-secondary);
        font-size: 14px;
      }

      .el-pagination__sizes .el-select {
        .el-select__wrapper {
          height: 32px;
          border-radius: 6px;
          border: 0.5px solid var(--el-border-color-lighter);

          &:hover {
            border-color: var(--el-border-color);
          }

          &.is-focused {
            border-color: var(--el-color-primary);
            box-shadow: 0 0 0 2px var(--el-color-primary-light-9);
          }
        }
      }

      .el-pager li {
        border-radius: 4px;
        min-width: 32px;
        height: 32px;
        line-height: 30px;
        font-size: 14px;

        &.is-active {
          background-color: var(--el-color-primary);
          border-color: var(--el-color-primary);
          color: var(--el-color-white);
        }

        &:hover:not(.is-active) {
          background-color: var(--el-fill-color);
        }
      }

      .btn-prev,
      .btn-next {
        border-radius: 4px;
        width: 32px;
        height: 32px;
        line-height: 30px;

        &:hover:not(:disabled) {
          background-color: var(--el-fill-color);
        }
      }

      .el-pagination__jump {
        .el-input {
          .el-input__wrapper {
            height: 32px;
            border-radius: 6px;
            width: 50px;
            border: 0.5px solid var(--el-border-color-lighter);

            &:hover {
              border-color: var(--el-border-color);
            }

            &.is-focus {
              border-color: var(--el-color-primary);
              box-shadow: 0 0 0 2px var(--el-color-primary-light-9);
            }
          }
        }
      }
    }
  }
}

// 响应式适配
@media (max-width: 768px) {
  // 移动端改为流式布局，去除固定高度限制
  .app-container {
    height: auto !important;
    min-height: calc(100vh - 40px) !important;
    overflow: visible !important;
  }

  .page-content {
    height: auto !important;
    overflow: visible !important;
  }

  .filter-section {
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 16px;

    .search-box {
      max-width: none;
      margin-bottom: 12px;
    }

    .filter-controls {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;

      .el-select {
        flex: 1;
      }
    }
  }

  .table-section {
    overflow: visible;

    // 移动端表格适配
    .user-tracking-table {
      overflow: visible;

      :deep(.el-table) {
        height: auto !important;

        // 移动端简化表格列，只保留最重要的信息
        .el-table__header {
          th:nth-child(3), // 绑定账号
          th:nth-child(4), // 账户状态
          th:nth-child(6), // 总数据
          th:nth-child(7) {
            // 操作
            display: none;
          }
        }

        .el-table__body {
          tr {
            td:nth-child(3), // 绑定账号
            td:nth-child(4), // 账户状态
            td:nth-child(6), // 总数据
            td:nth-child(7) {
              // 操作
              display: none;
            }
          }
        }
      }
    }

    // 移动端分页组件优化
    .pagination-section {
      padding: 12px 16px;

      :deep(.el-pagination) {
        justify-content: center;

        // 隐藏一些分页元素
        .el-pagination__sizes,
        .el-pagination__jump {
          display: none;
        }

        // 简化分页器显示
        .el-pagination__total {
          margin-right: auto;
        }
      }
    }
  }

  // 移动端优化表格内容显示
  .user-info {
    .time-info {
      font-size: 11px !important;

      .register-time,
      .redeem-time {
        margin-bottom: 1px;
      }
    }
  }

  .user-type-cell {
    gap: 4px !important;

    .version-tags {
      margin-top: 4px;
    }
  }

  .invitation-info {
    .invitation-code {
      font-size: 12px !important;
    }

    .agent-path {
      font-size: 11px !important;
      line-height: 1.3;
    }

    .today-publish {
      font-size: 11px !important;
      line-height: 1.3;
    }
  }

  .today-data {
    .data-row {
      font-size: 12px !important;
      line-height: 1.3;
    }
  }
}
